import React, { Component } from 'react';
import {
    Card,
    Divider,
    Form,
    Input,
    Button,
    Radio,
    Select,
    Cascader,
    DatePicker,
    InputNumber,
    TreeSelect,
    Switch,
    Breadcrumb,
    Layout
} from 'antd';
const { Content } = Layout;
// 导入富文本编辑器braft-editor
import BraftEditor from 'braft-editor';
// 导入braft-editor样式
import 'braft-editor/dist/index.css';
// 定义一段HTML字符串
const htmlString = `<p>Hello <b>World!</b></p>`;
// 将HTML字符串转换为编辑器所需要的EditorState实例
const editorState = BraftEditor.createEditorState(htmlString);

class ProductAdd extends Component {
    constructor(props) {
        super(props);
        this.state = {
            info: {}
        }
    }
    onFinish(values) {
        console.log(values);
    }
    changeStatus(checked) {
        const status = checked ? 2 : 1;
        this.setState({
            info: { ...this.state.info, status },
            form: React.createRef()
        });
    }
    componentDidMount() {
        // 异步设置编辑器内容
        setTimeout(() => {
            this.refs.form.setFieldsValue({
                introduce: BraftEditor.createEditorState('<p>Hello <b>World!</b></p>').toHTML()
            })
        }, 1000)
    }
    render() {
        return (
            <div>
                <Breadcrumb style={{ margin: '16px 0' }}>
                    <Breadcrumb.Item>管理中心</Breadcrumb.Item>
                    <Breadcrumb.Item>商品管理</Breadcrumb.Item>
                    <Breadcrumb.Item>商品添加</Breadcrumb.Item>
                </Breadcrumb>
                <Content
                    className="site-layout-background"
                    style={{
                        padding: 24,
                        margin: 0,
                        minHeight: 280,
                    }}
                >
                    <Form
                        labelCol={{ span: 2 }}
                        wrapperCol={{ span: 22 }}
                        layout="horizontal"
                        onFinish={this.onFinish.bind(this)}
                        ref="form"
                    >
                        <Form.Item label="商品名称"
                            name="name"
                            validateTrigger="onBlur"
                            rules={[
                                {
                                    required: true,
                                    message: '请输入商品名称!',
                                },
                            ]}
                        >
                            <Input placeholder="请输入商品名称" />
                        </Form.Item>
                        <Form.Item label="商品分类"

                            name="category"
                            validateTrigger="onBlur"
                            rules={[
                                {
                                    required: true,
                                    message: '请选择商品分类!',
                                },
                            ]}

                        >
                            <Select>
                                <Select.Option value="手机">手机</Select.Option>
                                <Select.Option value="家电">家电</Select.Option>
                            </Select>
                        </Form.Item>
                        <Form.Item
                            label="商品品牌"
                            name="brand"
                            validateTrigger="onBlur"
                            rules={[
                                {
                                    required: true,
                                    message: '请选择商品品牌!',
                                },
                            ]}

                        >
                            <Select>
                                <Select.Option value="华为">华为</Select.Option>
                                <Select.Option value="苹果">苹果</Select.Option>
                                <Select.Option value="小米">小米</Select.Option>

                            </Select>
                        </Form.Item>
                        <Form.Item label="商品销量"
                            name="sales_volume"
                            validateTrigger="onBlur"
                            rules={[
                                {
                                    required: true,
                                    message: '请填写商品销量!',
                                },
                            ]}

                        >
                            <InputNumber placeholder="请输入正整数" />
                        </Form.Item>
                        <Form.Item label="商品状态"
                            name="status"
                            validateTrigger="onBlur"
                            rules={[
                                {
                                    required: true,
                                    message: '请选择上架状态!',
                                },
                            ]}
                        >
                            <Switch defaultChecked onChange={(event) => this.changeStatus(event)} checkedChildren="上架" unCheckedChildren="下架" />
                        </Form.Item>
                        <Form.Item label="商品介绍"
                            name="introduce"
                            validateTrigger="onBlur"
                            rules={
                                [
                                    {
                                        required: true,
                                        message: '请输入商品介绍'
                                    }
                                ]
                            }
                        >
                            <div style={{ border: '1px solid #DDD', width: '100%' }}>
                                {/* <BraftEditor value={editorState} /> */}
                                {this.refs.form.getFieldDecorator('context', {
                                    initialValue: BraftEditor.createEditorState(context) || '',
                                })(
                                    <BraftEditor />
                                )}

                            </div>
                        </Form.Item>
                        <Form.Item>
                            <Button htmlType="submit" style={{ marginLeft: 85 }} type="primary">确认新增</Button>
                        </Form.Item>
                    </Form>
                </Content>
            </div>
        );
    }
}

export default ProductAdd;
